export default function useEchartMapOption(mapName: string) {
  const compId = mapName;
  const compId2 = "polygon";

  const sourceData = [
    {
      value: [113.29631, 23.188776],
      itemStyle: {
        color: "#4ab2e5",
      },
      popupContent: "广州体育馆",
      sort: "第1名",
      phone: "18396096445",
    },
    {
      value: [113.344891, 23.204986],
      itemStyle: {
        color: "#4fb6d2",
      },
      popupContent: "东坑山",
      sort: "第2名",
      phone: "17854567743",
    },
    {
      value: [113.343166, 23.232884],
      itemStyle: {
        color: "#52b9c7",
      },
      popupContent: "南潮高尔夫俱乐部",
      sort: "第3名",
      phone: "15715720813",
    },
    {
      value: [113.352652, 23.193294],
      itemStyle: {
        color: "#5abead",
      },
      popupContent: "南方医科大学",
      sort: "第4名",
      phone: "18818040509",
    },
    {
      value: [113.376511, 23.248027],
      itemStyle: {
        color: "#f34e2b",
      },
      popupContent: "大源洞",
      sort: "第5名",
      phone: "15180905693",
    },
    {
      value: [113.357251, 23.174956],
      itemStyle: {
        color: "#f56321",
      },
      popupContent: "广州天河汽车客运站",
      sort: "第6名",
      phone: "17660295408",
    },
    {
      value: [113.306084, 23.163793],
      itemStyle: {
        color: "#f56f1c",
      },
      popupContent: "云台花园",
      sort: "第7名",
      phone: "15059037559",
    },
  ];

  function getOption() {
    let option = {
      cusWidth: 3,
      backgroundColor: "",
      legend: {
        show: false,
      },
      tooltip: {
        trigger: "item",
      },
      geo: {
        map: compId2,
        show: false,
      },
      series: [
        {
          tooltip: {
            show: true,
            padding: [6, 10],
            backgroundColor: "rgba(255,255,255,.8)",
            borderColor: "#fff",
            borderRadius: "10px",
            textStyle: {
              align: "left",
              verticalAlign: "middle",
              lineHeight: 26,
              color: "rgba(0,0,0,.7)",
            },
            // data: componentProps.tooltipData
          },
          name: "数据",
          type: "map",
          // roam: true,
          // blendMode: "clear",
          map: compId, // 自定义扩展图表类型
          aspectScale: 1,
          // zoom: -100, //缩放
          zoom: 0.6,
          showLegendSymbol: false,
          label: {
            show: true,
            color: "rgba(255,255,255,1)",
            fontSize: 14,
          },
          itemStyle: {
            // areaColor: "rgba(14,149,241,1)",
            areaColor: "rgba(0,54,105,1)",
            // borderColor: "rgba(233,233,233,1)",
            borderColor: "rgba(63,218,255,.6)",
            borderWidth: 1,
            shadowColor: "rgba(63, 218, 255,0.6)",
            shadowBlur: 35,
            // shadowColor: "rgba(14,149,241,1)",
            // borderWidth: 1,
            // shadowBlur: 22,
            fontSize: 100,
          },
          emphasis: {
            label: {
              show: true,
              color: "rgba(255,255,255,1)",
              fontSize: 10,
            },
            itemStyle: {
              areaColor: "rgba(255,240,64,.5)",
              borderColor: "rgba(255,255,255,1)",
              borderWidth: 1,
            },
          },
          layoutCenter: ["50%", "50%"],
          layoutSize: "160%",
          markPoint: {
            symbol: "none",
          },
        },
        {
          type: "map",
          map: compId2, // 自定义扩展图表类型
          aspectScale: 1,
          zoom: 0.1,
          showLegendSymbol: false,
          label: {
            show: true,
            color: "rgba(255,255,255,1)",
            fontSize: 14,
          },
          // left: 200,
          itemStyle: {
            areaColor: "red", // 填充色
            borderWidth: 10, // 边框宽度
            borderColor: "green", // 边框色
            opacity: 0.5, // 透明度
          },
        },
        {
          type: "map",
          _cione_layer: true,
          map: "polygonLayer", // 自定义扩展图表类型
          tooltip: {
            triggerOn: "click",
            textStyle: {
              color: "red",
            },
          },
          zlevel: 5,
          aspectScale: 1,
          zoom: 0.1,
          showLegendSymbol: false,
          label: {
            show: true,
            color: "rgba(255,255,255,1)",
            fontSize: 14,
          },
          itemStyle: {
            areaColor: "red", // 填充色
            borderWidth: 10, // 边框宽度
            borderColor: "green", // 边框色
            opacity: 0.5, // 透明度
          },
        },
      ],
    };

    return option;
  }

  return {
    getOption,
  };
}
